import 'dart:math';

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  // 2. 设置默认值
  const MyApp({
    super.key,
    this.title = '',
    this.content = '',
    this.tColor = Colors.orange,
    this.cColor = Colors.yellow,
  });

  // 1. 定义属性
  final String title;
  final String content;
  final Color tColor;
  final Color cColor;

  // 重写build 返回需要封装的组件即可
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.purple,
          title: Center(
            child: Text(
              '标题为:$title',
              style: TextStyle(
                  color: tColor, fontSize: 30, fontWeight: FontWeight.w900),
            ),
          ),
        ),
        // 1.2 主体部分
        body: const MyContainer(),
      ),
    );
  }
}

// 随机颜色
Color getRandomColor() {
  Random random = Random();
  return Color.fromRGBO(
      random.nextInt(256), random.nextInt(256), random.nextInt(256), 1.0);
}

class MyContainer extends StatelessWidget {
  const MyContainer({super.key});

  @override
  Widget build(BuildContext context) {
    // 根据个数动态生成
    return GridView.builder(
      // Grid 的属性
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          // 主轴间隙 上往下
          mainAxisSpacing: 10,
          // 交叉轴间隙 左往右
          crossAxisSpacing: 5,
          // 宽高比
          childAspectRatio: 6 / 3,
          // 交叉轴元素个数
          crossAxisCount: 3),
      // 个数
      itemCount: 30,
      // 构建函数，返回 Widget
      itemBuilder: (context, index) {
        return Container(
          height: 100,
          color: getRandomColor(),
          alignment: Alignment.center,
          child: Text('黑马程序员 ${index + 1}'),
        );
      },
    );
  }
}

// 自适应，自动换行
class MyContainer_second extends StatelessWidget {
  const MyContainer_second({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView(
      // 实现的效果 类似于 flex
      // 装得下就装，装不下就换行
      // GridView组件之后，内部子元素的 尺寸，无法按照之前的方式控制
      // 通过 GridView 的属性来控制
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        mainAxisSpacing: 50.0, // 1.2 主轴(垂直)方向子元素间距
        crossAxisSpacing: 20.0, // 1.3 侧轴(水平)方向子元素间距
        // childAspectRatio: 5 / 1, // 1.4 子元素宽高比，默认宽高相同 1: 1
        maxCrossAxisExtent: 200,
      ),
      children: [
        // 子项们
        Container(
          color: Colors.red,
          height: 300,
        ),
        Container(
          color: Colors.orange,
          height: 300,
        ),
        Container(
          color: Colors.yellow,
          height: 300,
        ),
        Container(
          color: Colors.green,
          height: 300,
        ),
        Container(
          color: Colors.greenAccent,
          height: 300,
        ),
        Container(
          color: Colors.blue,
          height: 300,
        ),
        Container(
          color: Colors.purple,
          height: 300,
        )
      ],
    );
  }
}

class MyContainer_normalUse extends StatelessWidget {
  const MyContainer_normalUse({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2, // 1.1 设置侧轴方向子元素个数，此时每行展示的子元素个数是固定的
        mainAxisSpacing: 50.0, // 1.2 主轴(垂直)方向子元素间距
        crossAxisSpacing: 20.0, // 1.3 侧轴(水平)方向子元素间距
        childAspectRatio: 5 / 1, // 1.4 子元素宽高比，默认宽高相同 1: 1
        // 宽高比  和主轴的高度会有冲突
        // mainAxisExtent: 400, // 主轴元素高度
      ),
      children: [
        // 子项们
        Container(
          color: Colors.red,
        ),
        Container(
          color: Colors.orange,
        ),
        Container(
          color: Colors.yellow,
        ),
        Container(
          color: Colors.green,
        ),
        Container(
          color: Colors.greenAccent,
        ),
        Container(
          color: Colors.blue,
        ),
        Container(
          color: Colors.purple,
        )
      ],
    );
  }
}
